/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sf-switch"
         :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
         @click="switchValue">
        <input :id="id"
               ref="input"
               class="sf-switch__input"
               type="checkbox"
               :name="name"
               :true-value="activeValue"
               :false-value="inactiveValue"
               :disabled="switchDisabled"
               @change="handleChange"
               @keydown.enter="switchValue">
        <span v-if="inactiveIconClass || inactiveText"
              :class="['sf-switch__label', 'sf-switch__label--left', !checked ? 'is-active' : '']">
            <i v-if="inactiveIconClass"
               :class="[inactiveIconClass]"></i>
            <span v-if="!inactiveIconClass && inactiveText">{{ inactiveText }}</span>
        </span>
        <span ref="core"
              class="sf-switch__core"
              :style="{ 'width': coreWidth + 'px' }">
        </span>
        <span v-if="activeIconClass || activeText"
              :class="['sf-switch__label', 'sf-switch__label--right', checked ? 'is-active' : '']">
            <i v-if="activeIconClass"
               :class="[activeIconClass]"></i>
            <span v-if="!activeIconClass && activeText">{{ activeText }}</span>
        </span>
    </div>
</template>

<style lang="stylus" >
.sf-switch
    display inline-block
    position relative
    font-size 14px
    line-height 20px
    height 20px
    vertical-align middle

    &.is-checked
        .sf-switch__core
            border-color #4dcdcd
            background-color #4dcdcd

            &:after
                left 100%
                margin-left -17px

    &.is-disabled
        .sf-switch__core,
        .sf-switch__label
            cursor: not-allowed;
            opacity: 0.6;

.sf-switch__input
    position absolute
    width 0
    height 0
    opacity 0
    margin 0

.sf-switch__label
    display inline-block
    height 20px
    transition 0.2s
    font-size 14px
    font-weight 500
    cursor pointer
    vertical-align baseline
    color #303133

    &.is-active
        color #4dcdcd

.sf-switch__label--left
    margin-right 10px

.sf-switch__label--right
    margin-left 10px

.sf-switch__core
    margin 0
    display inline-block
    position relative
    width 40px
    height 20px
    border 1px solid #e8e9eb
    outline none
    border-radius 10px
    box-sizing border-box
    background #e8e9eb
    cursor pointer
    transition border-color 0.3s, background-color 0.3s
    vertical-align top

    &:after
        content ''
        position absolute
        top 1px
        left 1px
        border-radius 100%
        transition all 0.3s
        width 16px
        height 16px
        background-color #fafafa
</style>

<script>

/**
 * Created by clf on 2018-7-2
 */

export default {
    name: 'SfSwitch',

    props: {
        value: {
            type: [Boolean, String, Number],
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 40
        },
        activeIconClass: {
            type: String,
            default: ''
        },
        inactiveIconClass: {
            type: String,
            default: ''
        },
        activeText: String,
        inactiveText: String,
        activeColor: {
            type: String,
            default: ''
        },
        inactiveColor: {
            type: String,
            default: ''
        },
        activeValue: {
            type: [Boolean, String, Number],
            default: true
        },
        inactiveValue: {
            type: [Boolean, String, Number],
            default: false
        },
        name: {
            type: String,
            default: ''
        },
        id: String
    },

    data () {
        return {
            coreWidth: this.width
        };
    },

    computed: {
        checked () {
            return this.value === this.activeValue;
        },
        switchDisabled () {
            return this.disabled;
        }
    },

    watch: {
        checked () {
            this.$refs.input.checked = this.checked;
            if (this.activeColor || this.inactiveColor) {
                this.setBackgroundColor();
            }
        }
    },

    created () {
        if ([this.activeValue, this.inactiveValue].indexOf(this.value) === -1) {
            this.$emit('input', this.inactiveValue);
        }
    },

    mounted () {
        this.coreWidth = this.width;
        if (this.activeColor || this.inactiveColor) {
            this.setBackgroundColor();
        }
        this.$refs.input.checked = this.checked;
    },

    methods: {
        switchValue () {
            !this.switchDisabled && this.handleChange();
        },
        handleChange () {
            this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
            this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
            this.$nextTick(() => {

                // 设置input[type="checkbox"]的checked值
                this.$refs.input.checked = this.checked;
            });
        },
        setBackgroundColor () {
            let newColor = this.checked ? this.activeColor : this.inactiveColor;
            this.$refs.core.style.borderColor = newColor;
            this.$refs.core.style.backgroundColor = newColor;
        }
    }
};
</script>
